<template>
  <div class="login">
    <!-- <div class="lobgcImg">
      请进入
    </div> -->
    <div class="loginTop">
      <header-component class="header"></header-component>
      <!-- <div class="login_top_center" @click="routerJump">
        <img src="@/assets/images/login/FT.png" alt />
        <el-button class="btn" type="text">返回首页</el-button>
      </div> -->
    </div>
    <div class="user-border">
      <div class="user-login">
        <!-- <div class="user-loginBg">
          <img src="@/assets/images/login/loginBgA.png" alt />
        </div> -->
        <div class="user-loginForm">
          <div class="user-loginCenter">         
            <el-form @keyup.enter.native="login" class="loginForm" :model="loginForm" :rules="loginRules" ref="loginForm">
              <div class="box">
                  用户名登录
                  <!-- <h1>登录
                    <span>SIGN IN</span>
                  </h1> -->
              </div>
              <el-form-item prop="username">
              
                <el-input placeholder="请输入账号" v-model="loginForm.username" clearable prefix-icon="z-iconren-copy"></el-input>
                <!-- <div class="input">
                <label>
                  <span>账号</span>
                </label>
                 <input type="text" placeholder="请输入账号" v-model="loginForm.username">
                </div> -->
              </el-form-item>
              <el-form-item prop="password">
                <el-input placeholder="请输入密码" type="password" v-model="loginForm.password" clearable  prefix-icon="z-iconsuo"></el-input>
                <!-- <div class="input">
                <label>
                  <span>密码</span>
                </label>
                 <input type="password" placeholder="请输入密码" v-model="loginForm.password" > -->
                <!-- <el-input type="password" placeholder="密码" v-model="loginForm.password" clearable></el-input> -->
                <!-- </div> -->
              </el-form-item>
              <el-form-item prop="verifyCode" class="yanzheng">
                <el-input placeholder="请输入验证码"
                style="width:190px" @change="codeChange"
                v-model="loginForm.verifyCode" clearable
                prefix-icon="z-icondunpai"></el-input>
                <!-- <div class="input">
                  <label>
                    <span style="letter-spacing:0px;">验证码</span>
                  </label>
                  <input type="text" style="width:135px" placeholder="请输入验证码" @change="codeChange" v-model="loginForm.verifyCode" >
                </div> -->
                <!-- <el-input type="text" style="width:200px" placeholder="验证码" @change="codeChange" v-model="loginForm.verifyCode" clearable></!-->
                <div class="img"><img :src="codeUrl" alt=""></div>
                <i class="el-icon-refresh-left icon" @click="VerifyPicture"></i>
              </el-form-item>
              <!-- <div class="box">
                  <el-button class="button" type="text">忘记密码？</el-button>
              </div> -->
              <el-form-item class="wenji">
                <div class="statusL">
                  <el-checkbox v-model="autoLogin" size="mini" label="记住密码"></el-checkbox>
                  <el-button class="button" type="text" @click="jump">忘记密码？</el-button>
                </div>
                <!-- <div class="statusR">
                  <el-button class="button" type="text" @click="jump">忘记密码？</el-button>
                </div> -->
              </el-form-item>
              <el-form-item class="userLogin-btn">
                <el-button size="small" type="primary" @click="login">{{$t('message.login')}}</el-button>
              </el-form-item>
               <el-form-item class="userLogin-zc">
                <el-button size="small" type="text" @click="register">立即注册 <i class="z-iconjiantou" style="vertical-align:middle"></i></el-button>
              </el-form-item>
              <!-- <el-form-item class="footer">
                <div class="footer">
                  <div class="leftLine"></div>
                  <div class="cength">
                    <span class="">还没账号？</span>
                    <router-link to="/register" tag="span" class="register">立即注册</router-link>
                  </div>
                  <div class="rightLine"></div>
                </div>
              </el-form-item> -->
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="footerDB">
        <footer-component class="footer"></footer-component>
    </div>
     
  </div>
</template>

<script>
import header from '@/views/layout/header'
import footer from '@/views/layout/footer'
import { encrypt, decrypt } from '@/utils/crypto'
// import { login } from '@/request/system/administrators'
import { setCookie, getCookie } from '@/utils/utils'
import {verifyCode} from '@/request/api'
// import store from '@/store'
export default {
  components: {
    headerComponent: header,
    footerComponent: footer
  },
  data() {
    let checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入验证码'))
      }

      // 判断是否验证成功
      if(this.checkCodeStatus){
        return callback(new Error('验证码错误'))
      }else{
        callback()
      }
    }

    return {
      codeUrl:'',
      code:'',
      // 验证状态 默认验证成功
      checkCodeStatus:false,

      loginForm: {
        username: '',
        password: '',
        verifyCode:'',
        // companyCode: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        // verifyCode: [
        //   { required: true, message: '请输入验证码', trigger: 'blur' }
        // ],
        verifyCode: [
          {
            validator: checkCode,
            trigger: 'change'
          }
        ]
      },
      md5Pwd: '',
      checked: false
    }
  },
  created(){
    this.VerifyPicture()
    // console.log(this.$store.state.user.showDiv,9999999)
  },
  computed: {
    show() {
      return localStorage.getItem('IS_SHOW1')
    },
    // itemData(){
    //   return this.$store.state.user.showDiv
    // }
  },

  // 页面加载调用获取cookie值
  mounted() {
    this.$nextTick(() => {
      if (getCookie('UPWD_DX_H') && getCookie('UNAME_DX_H')) {
        this.checked = true
        this.loginForm.username = getCookie('UNAME_DX_H')
        this.loginForm.password = decrypt(
          getCookie('UPWD_DX_H'),
          'qsczsewaxd123456'
        )
      }
    })
  },
  methods: {
    register(){
      this.$router.push('/register')
    },
    jump(){
      this.$router.push('/forgetpasswd')
    },
    routerJump(){
      this.$router.push('/index')
    },
    //请求验证码图片
    VerifyPicture(){
      verifyCode().then(res =>{
        this.codeUrl = res.msg
        this.code = res.data
      })
    },
    // focusNative(){
    //   this.$store.dispatch('user/is_show',false)
    // },
    codeChange(){
      this.checkCodeStatus = false
    },
    login() {
    
      let _this = this
      this.$refs['loginForm'].validate(valid => {
        if (valid) {
          let loginForm={
            username: this.loginForm.username,
            password:  this.loginForm.password,
            verifyCode:this.loginForm.verifyCode + '_' +this.code,
          }
          _this.$store.dispatch('user/logIn', loginForm).then(() => {
            if (_this.checked) {
              _this.setCookie('Y')
            } else {
              _this.setCookie('N')
             
            }
            _this.$router.replace({
              path: '/layout'
            })
          })
            .catch( () => {
              _this.VerifyPicture()
              _this.checkCodeStatus = true
              _this.$refs.loginForm.validateField('verifyCode')
            })
        }
      })
    },
    setCookie(data) {
      // var encryptPwd = AES.encrypt(this.loginForm.password, 'qwertyuiopasdfgh')
      // if (this.checked == true) {
      //   this.setCookie('EGHUSERNAME', this.loginForm.username, 7)
      //   // this.setCookie('EGHPASSWORD', encryptPwd, 7)
      // } else {
      //   this.setCookie('EGHUSERNAME', '', -1)
      //   this.setCookie('EGHPASSWORD', '', -1)
      // }
      if (data === 'Y') {
        setCookie('UNAME_DX_H', this.loginForm.username)
        setCookie(
          'UPWD_DX_H',
          encrypt(this.loginForm.password, 'qsczsewaxd123456')
        )
      } else {
        setCookie('UNAME_DX_H', '')
        setCookie('UPWD_DX_H', '')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.yanzheng{
  position:relative;
  .cuowu{
    position: absolute;
    bottom: -24px;
    left: 0;
    color: #F56C6C;
    font-size:12px;
  }
}
.footer{
  position: relative;
  .cength{
    text-align: center;
    .register{
          color: #409EFF;
          cursor: pointer
    }
  }
  .leftLine,.rightLine{
    width: 100px;
    height: 1px;
    background-color: #DCDFE6;
    display: inline-block;
    position: absolute;
    top: 16px;
  }
    .rightLine{
      right: 0px;
    }
}
.img{
    display: inline-block;
    width: 126px;
    height: 40px;
    border: 1px solid #C0C4CC;
    border-radius: 6px;
    text-align: center;
    overflow: hidden;
    position: absolute;
    left: 200px;
    top: 0;
    img{
      width: 100%;
      height: 100%;
      cursor: pointer
    }
}
.icon{
  width: 100px;
  height: 100px;
  position: absolute;
  right: -75px;
  top: 10px;
  font-size: 25px;
  cursor: pointer
}
.upcase {
  ::v-deep .el-input__inner {
    text-transform: Uppercase;
  }
}
.login {
  width: 100%;
  height: 100%;
  min-height: 500px;
  position: relative;
  .lobgcImg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    z-index: 99999;
    font-size: 50px;
    color: #666;
    padding-left: 500px;
  }
  .footer_bottom{
  width: 100%;
  height: 6%;
  position: absolute;
  bottom: 0;
  text-align: center;
  color:#999999
}
}
.user-login {
  width:80%;
  height: 100%;
  margin: 0 auto;
  font-size: 0;
  display: flex;
  justify-content: flex-end;
  .user-loginBg {
    width: 40%;
    height: 60%;
    margin-top: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.user-border {
  // position: absolute;
  // bottom: 8rem;
  // top: 110px;
  // right: 0;
  // left: 0;
  // background-color: #F1F1F1;
    height: 757px;
    overflow: hidden;
    background: #1d55db url('../../../assets/images/login/DLBJ.png') 50% no-repeat;
    background-size: auto 133%;
}
.loginTop {
  width: 100%;
  // background-color: #fff;
  .login_top_center {
    width: 70%;
    margin: 0 auto;
    height: 100px;
    line-height: 100px;
    padding: 20px 0;
    position: relative;
    .btn{
      position: absolute;
      top: 30px;
      right: 242px;
      color:#FA6133
    }
    img {
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: 100%;
    }
  }
}
.loginForm {
  // margin-top: 3rem;
  // .el-form-item {
  //   margin-bottom: 20px !important;
  // }
  .el-input {
    border: none;
  }
}

.user-loginForm {
  height: 100%;
  min-width: 500px;
  float: right;
  display: flex;
  align-items: center;
  margin-right:-40px;
  .user-loginCenter {
    width: 80%;
    margin: 0 auto;
    // height: 500px;
    background-color: #fff;
    padding: 20px;
    // border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(56, 56, 54, 0.5);
    .box{
        font-size: 16px;
        text-align: left;
        font-weight: 400;
        color:#4136DE;
        /* border-bottom: 1px solid #eee; */
        padding-bottom: 18px;
        /* letter-spacing: 0.3em; */
        margin-bottom: 20px;
        margin-top: 20px;
      span{
        display: block;
        font-size: 13px;
        color: #999;
        // padding-top: 5px;
        letter-spacing: 0;
        text-indent: -8px;
      }
    }
    .input{
      width: 100%;
      position: relative;
      label{
          position: absolute;
          width: 92px;
          padding-left: 18px;
          height: 52px;
          line-height: 52px;
          font-size: 16px;
          span{
            letter-spacing: 10px;
          }
      }
      input{
          border-radius: 6px;
          border: 1px solid #dbdbdb;
          height: 52px;
          width: 75%;
          outline: none;
          padding-left: 92px;
      }
    }
  }
}

.loginForm-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  span {
    border-bottom: 1px solid #ccc;
  }
}
.user-login .creatAccount {
  color: #ccc;
  font-size: 1.4rem;
  text-align: right;
  margin: 10px 0;
  a {
    color: #0081cf;
  }
}
.user-login .status {
  font-size: 1.4rem;
  color: #ccc;
  margin-bottom: 10px;
  overflow: hidden;
  .autoLogin {
    float: left;
  }
  .forgotPwd {
    float: right;
    a {
      color: #0081cf;
    }
  }
}
.wenji{
  margin-top: -8px;
  .statusL{
  display: flex;
  justify-content: space-between;
  }
}
.user-login .userLogin-btn {
  // margin-top: 20px;
  text-align: center;
  .el-button {
    color: #fff;
    border: none;
    width: 100%;
    height: 40px;
    border-radius: 4px;
    // box-shadow: 0 6px 12px rgba(255,133,135,.2);
    // background: -webkit-linear-gradient(to left,#ffa385,#ff518b);
    //  background: linear-gradient(to left,#ffa385,#ff518b);
    letter-spacing: .5em;
    font-size:15px;
  }
}
.userLogin-zc{
  text-align: center;
  font-size:16px;
}

</style>
